<%@ page import="java.util.Date" %><%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/4/23
  Time: 4:23 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style>
    #content_body img{
        width: 80px;
        height: 80px
    }

    .text_slice {
        width: 250px;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    #div1{

        width: 100%;
        height: 120px;
        margin-buttom:20px;
    }
    #footer{
        width: 100%;
        height: 55px;
        background: rgba(1,0,0,0.4);
        /*background-color: #000;*/
        /*opacity: 0.4;*/
        position: fixed;
        bottom: 0;
    }


</style>

<div class="table-responsive">

    <table class="table">
        <caption>我的购物车信息</caption>
        <thead>
        <tr>
            <th><input type="checkbox" id = "call" onclick="call()"></th>
            <th>序号</th>
            <th>产品图</th>
            <th>产品名称</th>
            <th>产品单价</th>
            <th>购买数量</th>
            <th>总价</th>
            <th>产品描述</th>
            <th>操作</th>
        </thead>
        <tbody id="content_body">
            <c:forEach items="${pageInfo.list}" var="c" varStatus="vs">
                <tr>
                    <td><input type="checkbox" onclick="checks(this)" ></td>
                    <td>${vs.count}</td>
                    <td><img src="http://localhost:80/product/${c.productImg}"</td>
                    <td>${c.productName}</td>
                    <td>${c.productPrice}</td>
                    <td><button onclick="changeNum(this,${c.id})" style="width: 20px" type="button">-</button>
                        <input onkeydown="cc(this,${c.id})"  style="width: 30%;display: inline" class="form-control" type="text" value="${c.counts}">
                        <button onclick="changeNums(this,${c.id})"  style="width: 20px" type="button">+</button>
                    </td>
                    <td>${c.price}</td>
                    <td onmouseover="tt(this)" onmouseout="t2(this)" class="text_slice">${c.productRemark}</td>


                    <td><button class="btn btn-link text-danger" onclick="del(this,${c.id})"><span class="text-danger glyphicon glyphicon-trash"></span>
                    </button>
                    </td>

                </tr>
            </c:forEach>
        </tbody>
    </table>
    <div id = "div1">
        <%@include file="../common/page2.jsp"%>

    </div>


    <div id="footer">
        <div class="row">
            <div class="col-md-offset-4 col-md-3" style="padding-top: 10px">
                <span class="text-danger" style="font-size: 20px">共计<span id="count_span">0</span>件,总价<span id="allP">0</span>元</span>
            </div>
            <div class="col-md-offset-2 col-md-3">
                <div style="text-align: right;padding-right: 20px;padding-top: 5px">
                    <button class="btn btn-lg btn-warning"><i class="layui-icon layui-icon-rmb"></i>去结算</button>
                </div>
            </div>
        </div>

    </div>


</div>
<script>
      function call() {



      }
    function checks(obj) {

        let span = $("#count_span");
        let allP = $("#allP");
        if(obj.checked){
            span.text(parseInt(span.text())+1);
            allP.text(parseFloat(allP.text())+parseFloat($(obj).parent().next().next().next().next().next().next().text()));
        }else{
            span.text(parseInt(span.text())-1);
            allP.text(parseFloat(allP.text())-parseFloat($(obj).parent().next().next().next().next().next().next().text()));
        }






    }


    function cc(obj,cid){
        let e = event || window.event;
        if(e.keyCode==13){//敲的是enter键
            let btn_obj = obj.nextElementSibling;
            upz(cid,obj,btn_obj);
        }
    }


    function tt(obj){
        obj.className="";
    }

    function t2(obj){
        obj.className="text_slice";
    }

    function del(obj,id) {

        layui.use(['layer'], function(){
            let layer = layui.layer;

            layer.confirm('is not?', {icon: 3, title:'提示'}, function(index)
                {t
                    // $.post('/mac/login/carts/del',{"id":id},function(data){
                   $.post('/mac/login/carts/del',{"id":id},function (data) {
                       if(data.code == "200")
                       {
                           $(obj).parent().parent().remove();
                           layer.msg('删除成功',{icon:6});
                       }

                       else
                       {
                           layer.msg('删除失败',{icon:6});
                       }
                   })



            }
            )
        })


    }

    function changeNums(obj,cardId){
        let input_obj = obj.previousElementSibling;

        input_obj.value = parseInt(input_obj.value)+1;

      upz(cardId,input_obj,obj);


    }

    function changeNum(obj,cardId){
        let input_obj = obj.nextElementSibling;

        input_obj.value = parseInt(input_obj.value)-1;

        upz(cardId,input_obj,obj);



    }



    function  upz(cardId,counts,btn_obj) {

        countss = counts.value;

        $.post('/mac/login/carts/update',{"cardId":cardId,"p_name":countss},function (data) {

              if(data.code == "200")
              {

                   alert("更新成功");
                  let product_price = parseFloat($(btn_obj).parent().prev().text());

                  $(btn_obj).parent().next().text(parseFloat(counts.value)*product_price);

              }

        })

    }
</script>
